
<template>
  <div class="bottom-data">
    <ul>
      <li>
        <img src="@/assets/imgs/electricity/dgf.png" alt="图标" />
        <div>
          <img src="@/assets/imgs/electricity/dleft.png" alt="箭头" />
          <span>光伏</span>
          <img src="@/assets/imgs/electricity/dright.png" alt="箭头" />
        </div>
        <p>{{ type==1?botData.composePhotovoltaic:botData.proportionPhotovoltaic }}<span>%</span></p>
      </li>
      <li>
        <img src="@/assets/imgs/electricity/dfd.png" alt="图标" />
        <div>
          <img src="@/assets/imgs/electricity/dleft.png" alt="箭头" />
          <span>风电</span>
          <img src="@/assets/imgs/electricity/dright.png" alt="箭头" />
        </div>
        <p>{{ type==1?botData.composeWindPower:botData.proportionWindPower }}<span>%</span></p>
      </li>
      <li>
        <img src="@/assets/imgs/electricity/dhd.png" alt="图标" />
        <div>
          <img src="@/assets/imgs/electricity/dleft.png" alt="箭头" />
          <span>火电</span>
          <img src="@/assets/imgs/electricity/dright.png" alt="箭头" />
        </div>
        <p>{{ type==1?botData.composeThermalPower:botData.proportionThermalPower }}<span>%</span></p>
      </li>
      <li>
        <img src="@/assets/imgs/electricity/dsd.png" alt="图标" />
        <div>
          <img src="@/assets/imgs/electricity/dleft.png" alt="箭头" />
          <span>水电</span>
          <img src="@/assets/imgs/electricity/dright.png" alt="箭头" />
        </div>
        <p>{{ type==1?botData.composeHydropower:botData.proportionHydropower }}<span>%</span></p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "BottomData",
  props: {
    botData: {
      type: Object,
      default: () => {},
    },
    type: {
      type: [Number, String],
      default: 1,
    },
  },
  data() {
    return {
      
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.bottom-data {
  margin-top: 10px;

  ul {
    width: 361px;
    height: 122px;
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    background: rgba(31, 55, 84, 0.5);

    li {
      margin: 0;
      padding: 15px 0 0;
      list-style: none;
      width: 90px;
      height: 114px;
      text-align: center;
      background: url("@/assets/imgs/electricity/dbg.png") no-repeat;
      font-size: 14px;
      color: #fff;
      div{
        span{
          font-size: 14px;
          font-family: "阿里巴巴普惠体";
        }
      }

      p {
        font-size: 16px;
        color: #fff;
        font-family: "优设标题";
        transform: skewX(-9deg);
        /* 水平倾斜10度 */
        margin-top: 14px;

        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>